<template>
    <div class="schat-stop max-width">
        <div class="stop-btn" @click="handleStop" v-if="!isStreaming">
            <img src="@/assets/images/chat/stop.png" alt="">
            <span>停止响应</span>
        </div>
        <div class="scroll-btn" @click="handleScrollDown" v-if="!isScrolledToBottom && msgLength > 0">
            <div class="circle-border" v-if="!isStreaming">
                <div class="circle-core"></div>
            </div>
            <el-icon :size="14">
                <ArrowDownBold />
            </el-icon>
        </div>
    </div>
</template>
<script setup>
import { ArrowDownBold } from "@element-plus/icons-vue";
const props = defineProps({
    isStreaming: {
        type: Boolean,
        default: false,
    },
    isScrolledToBottom: {
        type: Boolean,
        default: true,
    },
    msgLength: {
        type: Number,
        default: 0,
    }
});


const emit = defineEmits([
    "stop",
    "scroll-down",
]);

// 处理停止响应的函数
const handleStop = () => {
    emit("stop");
};

// 处理滚动到底部的函数
const handleScrollDown = () => {
    emit("scroll-down");
};


</script>
<style scoped lang="scss">
.schat-stop {
    position: relative;
    .scroll-btn {
        width: 35px;
        height: 35px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.11);
        cursor: pointer;
        border-radius: 80px;
        position: absolute;
        top: -35px;
        right: 3px;
        z-index: 3;
        background: #fff;
        transition: all 0.3s ease;
        border: 1px solid transparent;

        &:hover {
            background: #f3f3f3;
            border-color: #D0D5DD;
        }

        .circle-border {
            width: 34px;
            height: 34px;
            padding: 1px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 50%;
            background: #fff;
            background: linear-gradient(0deg, rgba(63, 249, 220, 0.1) 33%, rgb(183, 213, 253) 100%);
            animation: spin .8s linear 0s infinite;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -17px;
            margin-left: -17px;
        }

        .circle-core {
            width: 32px;
            height: 32px;
            background-color: #fff;
            border-radius: 50%;
        }

        @keyframes spin {
            from {
                transform: rotate(0);
            }

            to {
                transform: rotate(359deg);
            }
        }
    }

    .stop-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 110px;
        height: 35px;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.11);
        color: #667085;
        font-size: 12px;
        margin: auto;

        img {
            width: 16px;
            margin-right: 8px;
        }

        &:hover {
            background: #F9FAFB;
        }
    }
}
</style>
